<template>
  <div class="cart">
      <!-- 通过循环来显示购物车项目 -->
      <item-view v-for="(item,index) in items" 
                 :ordinal="index+1"
                 :item="item"
                 :key="item.id"
                 :decrease="handleDecrease"
                 :increase="handleIncrease"
                 :modify="handleChange"
                 @删除="remove">
      </item-view>
      <!-- 显示结算区域( 包含 总价格 和 结算按钮 )-->
      <settle-view :total-price="total"></settle-view>

      <!-- 对话框 (通过dialog对象的visible属性控制对话框是否显示) -->
      <el-dialog :model-value="dialog.visible" :before-close="beforeClose">
          <template #title>
              是否删除?
          </template>
          <span>
              是否从购物车中删除 {{ dialog.itemName }} ?
          </span>
          <template #footer>
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button type="primary" size="small" @click="confirm">确定</el-button>
          </template>
      </el-dialog>
  </div>
</template>

<script>
import ItemView from '@/components/ItemView.vue';
import SettleView from '@/components/SettleView.vue';

export default {
    name: 'CartView',
    data(){
        return {
            // 在购物车中显示的购物车项目
            items: [
                { id: 12 , name: '藜蒿炒腊肉' , price: 50 , amount: 50 },
                { id: 10 , name: '荷包辣椒荷包蛋' , price: 28 , amount: 100 },
                { id: 11 , name: '毛血旺' , price: 26 , amount: 150 },
                { id: 27 , name: '回锅肉' , price: 40 , amount: 20 }
            ],
            // 控制对话框
            dialog: {
                // 用于确定对话框是否显示的属性
                visible: false,
                // 用于确定被删除购物车项的编号
                itemId: '',
                // 用于确定被删除购物车项中的商品名称
                itemName: ''
            }
        }
    },
    components: {
        'item-view': ItemView,
        'settle-view': SettleView
    },
    methods: {
        remove(id) {
            // 根据 购物车项目编号 寻找指定的 购物车项
            let item = this.items.find( e => e.id == id );
            if( item ) {
                // 将 购物车项 的 编号 和 名称 都保存到 dialog 属性中
                this.dialog.itemId = item.id ;
                this.dialog.itemName = item.name ;
            }
            // 显示对话框
            this.dialog.visible = true ;
        },
        cancel(){
            this.dialog.visible = false ;
        },
        confirm(){
            // 从当前组件的 dialog 属性中获取 itemId 值
            let id = this.dialog.itemId ;
            // 从当前组件的 items 中寻找被删除 购物车项 的 索引
            let index = this.items.findIndex( e => e.id == id );
            if( index != -1 ) {
                // 从数组中删除购物车项
                this.items.splice( index , 1 );
            }
            // 通过 dialog 的 visible 属性来关闭对话框
            this.dialog.visible = false ;
        },
        beforeClose(){
            // 将 dialog 属性中的 itemId 和 itemName 重置
            this.dialog.itemId = '';
            this.dialog.itemName = '';
        },
        handleDecrease(id){
            let item = this.items.find( e => e.id == id );
            if( item && item.amount > 1 ) {
                item.amount--;
            }
        },
        handleIncrease(id){
            let item = this.items.find( e => e.id == id );
            if( item ) {
                item.amount++;
            }
        },
        handleChange(id,count){
            let item = this.items.find( e => e.id == id );
            if( item ) {
                item.amount = Number(count) ;
            }
        }
    },
    computed: {
        total(){
            let t = this.items.reduce( (p,c) => p + c.price * c.amount , 0 );
            return t.toLocaleString('zh-CN',{ style: 'currency' , currency: 'CNY' });
        }
    }
}
</script>

<style>
.cart {
    margin: 15px;
    border: 1px solid white;
}
</style>